'use client'
import React, { useState } from 'react'
import { Message, Upload } from '@arco-design/web-react'
import { IconUpload } from '@arco-design/web-react/icon'
import '@arco-design/web-react/dist/css/arco.css'

type UploadButtonProps = {
  onFileUpload?: (file: File) => void
  className?: string
  size?: 'small' | 'medium' | 'large'
  showText?: boolean
}

const UploadButton: React.FC<UploadButtonProps> = ({
  onFileUpload,
  className = '',
  size = 'medium',
  showText = false,
}) => {
  const [uploadedFile, setUploadedFile] = useState<File | null>(null)

  const handleUpload = (file: File, fileList: File[]) => {
    console.log('file', file)
    console.log('fileList', fileList)
    setUploadedFile(file)
    if (onFileUpload)
      onFileUpload(file)

    Message.success('文件上传成功')
    return true
  }

  const sizeClasses = {
    small: 'text-xs',
    medium: 'text-sm',
    large: 'text-base',
  }

  return (
    <div className={`inline-flex items-center ${className}`}>
      <Upload
        action='/'
        onChange={(_, currentFile) => {
          console.log('currentFile', currentFile)
        }}
        beforeUpload={handleUpload}
        showUploadList={false}
      >
        <button
          className={`flex items-center ${sizeClasses[size]} text-gray-500 hover:text-gray-700 focus:outline-none`}
          title="上传文件"
        >
          <IconUpload className="mr-1" />
          {showText && '上传'}
        </button>
      </Upload>
      {uploadedFile && (
        <div className={`ml-1 ${sizeClasses[size]} text-gray-500 truncate max-w-[100px]`} title={uploadedFile.name}>
          {uploadedFile.name}
        </div>
      )}
    </div>
  )
}

export default UploadButton
